<template>
	<view class="box w100 min100">
		<u-tabs-swiper ref="tabs" :list="tabslist" :current="current" inactive-color="#777" active-color="#F66E23"
			:is-scroll="false" @change="tabsChange"></u-tabs-swiper>
		<empty v-if="list.length==0" text="暂无优惠券"></empty>
		<view class="list bg-white mlr-36 pd-20 radius-10 mt-30 flex1 flex-middle" v-for="(item,i) in list" :key="i">
			<view :class="[current==0?'bg-change-yellow':'bg-2','center flex-column radius-10']" style="width: 186rpx;height: 152rpx;">
				<view class="white bold">
					<text class="size-32">￥</text>
					<text class="size-50">{{item.coupon_price*1}}</text>
				</view>
				<view class="mt-4 size-22 white">
					满{{item.limit_price*1}}元可用
				</view>
			</view>
			<view class="u-flex-1 ml-20 flex1 flex-between flex-column relative" style="height: 152rpx;">
				<view class="size-28">
					{{item.coupon_name}}
				</view>
				<view class="size-26 gray-2">
					满{{item.limit_price*1}}元可用
				</view>
				<view class="size-24 gray-3 flex">
					<view class="">
						{{item.expiration}}前可用
					</view>
					<view class="border-yellow yellow size-26 ptb-6 plr-14 radius-10" v-if="current==0">
						立即使用
					</view>
				</view>
				<view class="absolute" style="right: 0;">
					<image src="../../../static/coupon-overdue.png" style="width: 120rpx;height: 120rpx;" mode="" v-if="current==1"></image>
					<image src="../../../static/coupon-available.png" style="width: 120rpx;height: 120rpx;" mode="" v-if="current==2"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabslist: [{
					name: '未使用'
				}, {
					name: '已使用'
				}, {
					name: '已过期'
				}],
				current: 0,
				list: [],
			}
		},
		onLoad() {
			this.init()
		},
		onPullDownRefresh() {
			this.init()
		},
		methods: {
			tabsChange(e) {
				this.current = e
				this.init()
			},
			init() {
				this.$http('/api/user/coupon', {
					type: this.current + 1
				}, "POST").then(data => {
					this.list = data
					uni.stopPullDownRefresh()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		background: #F8F8F8;
		overflow: hidden;
	}
</style>
